<template>
  <!-- 收入明细 -->
  <div class="revenue-details">
    <c-title text="收入明细"></c-title>
    <div class="top-pane">
      <div class="left-box">
        <span class="num">{{ all }}</span>
        <span class="name">累计收入</span>
      </div>
      <div class="line"></div>
      <div class="middle-box">
        <span class="num">{{ wait }}</span>
        <span class="name">待结算收入</span>
      </div>
      <div class="line"></div>
      <div class="right-box">
        <span class="num">{{ already }}</span>
        <span class="name">可提现收入</span>
      </div>
    </div>
    <van-tabs v-model="activeName" background="#f5f5f5" title-active-color="#ee0a24">
      <van-tab title="收入明细" name="1">
        <d-list :loading="loading" :finished="finished" @load="onLoad">
          <div class="income-pane">
            <div class="income-box" v-for="(item, idnex) in listData" :key="">
              <div class="top">
                <span class="order-sn">{{ item.order_sn }}</span>
                <span class="date">{{ item.created_at }}</span>
              </div>
              <div class="middle-box">
                <img :src="item.thumb" alt="" />
                <div class="right-rol">
                  <div class="goods-name">{{ item.title }}</div>
                  <div class="status">{{ item.status_name }}</div>
                </div>
              </div>
              <div class="bottom-box">
                <div class="remaining-quantity">
                  <span class="num">{{ item.rest_nums }}</span>
                  <span class="name">剩余数量</span>
                </div>
                <div class="cost-recovery">
                  <span class="num">{{ item.cost }}</span>
                  <span class="name">收回成本</span>
                </div>
                <div class="profit">
                  <span class="num">{{ item.profit }}</span>
                  <span class="name">利润</span>
                </div>
              </div>
            </div>
          </div>
        </d-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import revenueDetails_controller from "./revenueDetails_controller";

export default revenueDetails_controller;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.revenue-details {
  margin: 0.72rem 0.94rem 0 0.94rem;
  padding-bottom: 0.72rem;

  .top-pane {
    padding: 1.72rem 2rem;
    background: linear-gradient(-90deg, #fe8b30 0%, #fbce68 100%);
    border-radius: 0.31rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.23rem;

    .left-box {
      display: flex;
      justify-content: center;
      flex-direction: column;

      .num {
        font-size: 0.8rem;
        font-weight: bold;
        color: #fff;
      }

      .name {
        font-size: 0.55rem;
        font-weight: 400;
        color: #fff;
        margin-top: 0.38rem;
        line-height: 1.5;
      }
    }

    .line {
      display: inline-block;
      width: 0.03rem;
      background: white;
    }

    .middle-box {
      display: flex;
      justify-content: center;
      flex-direction: column;

      .num {
        font-size: 0.8rem;
        font-weight: bold;
        color: #fff;
      }

      .name {
        font-size: 0.55rem;
        font-weight: 400;
        color: #fff;
        margin-top: 0.38rem;
        line-height: 1.5;
      }
    }

    .right-box {
      display: flex;
      justify-content: center;
      flex-direction: column;

      .num {
        font-size: 0.8rem;
        font-weight: bold;
        color: #fff;
      }

      .name {
        font-size: 0.55rem;
        font-weight: 400;
        color: #fff;
        margin-top: 0.38rem;
        line-height: 1.5;
      }
    }
  }

  .income-pane {
    margin-top: 0.84rem;

    .income-box {
      background: #fff;
      border-radius: 0.31rem;
      padding: 0.78rem 0.66rem 0.72rem 0.66rem;
      margin-bottom: 0.63rem;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        line-height: 1;

        .order-sn {
          font-size: 0.63rem;
          font-weight: 400;
          color: #666;
        }

        .date {
          font-size: 0.63rem;
          font-weight: 400;
          color: #807e7e;
        }
      }

      .middle-box {
        margin: 0.75rem 0;
        display: flex;

        img {
          width: 2.8rem;
          height: 2.8rem;
          background: #f51d1d;
          border-radius: 0.19rem;
          margin: 0 !important;
        }

        .right-rol {
          display: flex;
          flex-direction: column;
          line-height: 1;
          justify-content: space-between;
          width: 100%;

          .goods-name {
            font-size: 0.81rem;
            font-weight: 400;
            color: #242424;
            text-align: left;
            margin-left: 0.66rem;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-overflow: ellipsis;
          }

          .status {
            font-size: 0.81rem;
            font-weight: 400;
            color: #f51d1d;
            width: 100%;
            display: block;
            text-align: right;
          }
        }
      }

      .bottom-box {
        line-height: 1;
        display: flex;
        justify-content: space-around;
        padding-top: 0.75rem;
        border-top: 0.03rem solid #ececec;

        .remaining-quantity {
          display: flex;
          flex-direction: column;

          .num {
            font-size: 0.81rem;
            font-weight: 500;
            color: #f20606;
          }

          .name {
            font-size: 0.69rem;
            font-weight: 400;
            color: #666;
            margin-top: 0.72rem;
          }
        }

        .cost-recovery {
          line-height: 1;
          display: flex;
          flex-direction: column;

          .num {
            font-size: 0.81rem;
            font-weight: 500;
            color: #f20606;
          }

          .name {
            font-size: 0.69rem;
            font-weight: 400;
            color: #666;
            margin-top: 0.72rem;
          }
        }

        .profit {
          display: flex;
          flex-direction: column;

          .num {
            font-size: 0.81rem;
            font-weight: 500;
            color: #f20606;
          }

          .name {
            font-size: 0.69rem;
            font-weight: 400;
            color: #666;
            margin-top: 0.72rem;
          }
        }
      }
    }
  }
}
</style>
